<template>
  <view class="page pageBg-color">

    <com-arrowLeft></com-arrowLeft>

    <view :style="{ marginTop: bottom + 'px' }" class="main">

      <com-empty v-if="isEmpty && !isLoading"></com-empty>

      <view v-else class="list">
        <view @click="goSubject(item._id)" v-for="item in dataList" :key="item._id" class="item">
          <view class="card">

            <view class="pic-list">
              <view class="group">
                <view v-for="value in item.picList" :key="value._id" class="pic">
                  <image :src="value.smallPicurl" lazy-load mode="aspectFill" class="image" />
                </view>
              </view>
            </view>

            <view class="footer">
              <view class="title">
                <text>{{ item.theme }}</text>
              </view>
              <view class="content">
                <view class="like-num">
                  <text>{{ item.view_count }}人喜欢</text>
                </view>
                <view class="image-num">
                  <text>{{ item.size }}P</text>
                </view>
              </view>
            </view>

          </view>
          <view class="line1"></view>
          <view class="line2"></view>
        </view>

        <com-backTop :fixed="fixed"></com-backTop>
        <com-loadFooter :isHasMore="isHasMore" :isLoading="isLoading"></com-loadFooter>

      </view>
    </view>
  </view>
</template>


<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad, onPullDownRefresh, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { API } from "@/services/api";
import { getMenuInfo } from '@/utils/utils';
let bottom = getMenuInfo().bottom;

const dataList: any = ref([]); // 数据列表
const page = ref(1); // 页码
const isLoading = ref(false); // 加载状态
const isHasMore = ref(true); // 是否有更多数据可加载
const isEmpty = ref(true); // 数据是否为空

const fixed = ref(false); // 刷新、返回顶部 按钮的显示

// 
onLoad(() => {
  getData();
});

// 
onPullDownRefresh(() => {
  onRefresh();
});

// 
onReachBottom(() => {
  if (isHasMore.value) getData();
});

// 
onPageScroll((e) => {
  fixed.value = e.scrollTop > 200;
});

// 
const onRefresh = () => {
  dataList.value = [];
  page.value = 1;
  getData();
};

// 
const getData = () => {
  isLoading.value = true;
  API.subjectList(page.value, 6)
    .then((res: any) => {
      console.log(`~~~获取 page = ${page.value} 的数据`);
      let newList = [...dataList.value];
      if (page.value === 1) newList = [];
      dataList.value = newList.concat(res.data || []);
      isLoading.value = false;
      isHasMore.value = res.data && res.data.length >= 6;
      isEmpty.value = dataList.value.length <= 0;
      page.value++;
    })
    .catch(() => {
      isLoading.value = false;
      isHasMore.value = false;
      isEmpty.value = true;
    })
};

// 
const goSubject = (id: string) => {
  uni.navigateTo({
    url: `/pages/pkgB/subjectList/index?id=${id}`
  })
};

</script>


<style lang="scss" scoped>
@use "style.scss";
</style>